<template>
	<view class="">
		<view class="content" v-if="id==1">
			<navbar>案例展示</navbar>
			<view class="nav_list" @click="onPageJump('./zslist?id=1')">
				<image src="../../static/tab/icon_case.png" mode="aspectFit"></image>
				<text>不固定导航</text>
			</view>
			<view class="nav_list" @click="onPageJump('./zslist?id=2')">
				<image src="../../static/tab/icon_case.png" mode="aspectFit"></image>
				<text>透明导航</text>
			</view>
			<view class="nav_list" @click="onPageJump('./zslist?id=3')">
				<image src="../../static/tab/icon_case.png" mode="aspectFit"></image>
				<text>颜色渐变固定导航</text>
			</view>
			<view class="nav_list" @click="onPageJump('./zslist?id=4')">
				<image src="../../static/tab/icon_case.png" mode="aspectFit"></image>
				<text>复杂的颜色渐变导航</text>
			</view>
			<view class="nav_list" @click="onPageJump('./zslist?id=5')">
				<image src="../../static/tab/icon_case.png" mode="aspectFit"></image>
				<text>显示首页按钮、标题居左、字体颜色、背景颜色</text>
			</view>
			<view class="nav_list" @click="onPageJump('./zslist?id=6')">
				<image src="../../static/tab/icon_case.png" mode="aspectFit"></image>
				<text>分享出去的页面效果</text>
			</view>
			<view class="nav_list" @click="onPageJump('./zslist?id=7')">
				<image src="../../static/tab/icon_case.png" mode="aspectFit"></image>
				<text>左插槽-地址选择</text>
			</view>
			<view class="nav_list" @click="onPageJump('./zslist?id=8')">
				<image src="../../static/tab/icon_case.png" mode="aspectFit"></image>
				<text>中插槽-搜索框</text>
			</view>
			<view class="nav_list" @click="onPageJump('./zslist?id=9')">
				<image src="../../static/tab/icon_case.png" mode="aspectFit"></image>
				<text>右插槽-搜索图标</text>
			</view>
			<view class="nav_list" @click="onPageJump('./zslist?id=10')">
				<image src="../../static/tab/icon_case.png" mode="aspectFit"></image>
				<text>动态改变标题、字体颜色、背景颜色</text>
			</view>
		</view>
		<view class="content" v-else>
			<navbar>底部导航栏</navbar>
			<view class="dibu">
				<view :style="{'margin-left':ind==2?'120rpx':'0','margin-right':ind==1?'30rpx':'0'}" class="dibulist"
					v-for="(el,ind) in list" @click="nato(ind,el.path)">
					<image v-if="nowind!=ind" :src="el.icon"></image>
					<image class="isnow" v-if="nowind==ind&&!scr" :src="el.cicon"></image>
					<image class="fztb" :style="{left:ind==0?'-30rpx':''}" v-if="nowind==ind&&scr" :src="el.sicon">
					</image>
					<view :class="[nowind==ind?'dibuname':'ndibuname']">{{el.name}}</view>
				</view>
				<view class="dibuzj" @click="nato(99,'/pages/index/daohang')">
					<image src="../../static/xfcdl/bh-shouye-bq-icon-center.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from "../../components/tabbar";
	export default {
		components: {
			navbar
		},
		data() {
			return {
				id: 1,
				scr: false,
				list: [{
						name: '首页',
						icon: '../../static/xfcdl/bh-shouye-bq-icon-shou.png',
						cicon: '../../static/xfcdl/bh-shouye-bq-icon-shou-click.png',
						sicon: 'https://hywf.yweifang.com/r/cms/www/weifang/ximg/wfsyssan1.png',
						path: '/pages/index/index'
					}, {
						name: '热门',
						icon: '../../static/xfcdl/bh-shouye-bq-icon-you.png',
						cicon: '../../static/xfcdl/bh-shouye-bq-icon-you-click.png',
						path: '/pages/youxuan/youxuan'
					},
					{
						name: '购物车',
						icon: '../../static/xfcdl/bh-shouye-bq-icon-faxian.png',
						cicon: '../../static/xfcdl/bh-shouye-bq-icon-faxian-click.png',
						path: '/pages/gouwu1/carts'
					},
					{
						name: '我的',
						icon: '../../static/xfcdl/bh-shouye-bq-icon-wode.png',
						cicon: '../../static/xfcdl/bh-shouye-bq-icon-wode-click.png',
						path: '/pages/wode/wode'
					}
				],
				nowind: 0
			};
		},
		onLoad(options) {
			this.id = options.id;
		},
		methods: {
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onShare(url) {
				uni.reLaunch({
					url: url
				});
			},
			onSwitchTab(url) {
				uni.switchTab({
					url: url
				});
			},
		}
	};
</script>
<style lang="scss">
	//顶部导航栏
	.page {
		padding-top: 20upx;
	}

	.nav_list {
		background-color: #fff;
		padding: 30upx;
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 10upx;

		&:active {
			background-color: #F5f5f5;
		}

		image {
			width: 40upx;
			height: 40upx;
		}

		text {
			font-size: 28upx;
			color: #333;
			margin-left: 30upx;
		}

		&::after {
			content: '';
			position: absolute;
			right: 30upx;
			top: 50%;
			transform: translateY(-50%);
			width: 40upx;
			height: 40upx;
			background-image: url('../../static/tab/icon_right.png');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
		}
	}

	//底部导航栏
	.dibuzj {
		width: 111rpx;
		height: 111rpx;
		background: linear-gradient(180deg, #08D9FC, #128BFF, #0E5DFE);
		box-shadow: 0px 0px 14rpx 0px rgba(1, 29, 53, 0.25);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 50%;
		margin-left: -55.5rpx;
		top: -20rpx;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	@keyframes shangyi {
		from {
			top: 101rpx
		}

		to {
			top: -25rpx
		}
	}

	@keyframes shangyi1 {
		from {
			top: -55rpx;
			opacity: 0;
		}

		to {
			top: 5rpx;
			opacity: 1;
		}
	}

	.dibulist {
		width: 80rpx;
		text-align: center;
		position: relative;

		.fztb {
			width: 139rpx;
			height: 125rpx;
			position: absolute;
			left: -23rpx;
			animation: shangyi .5s forwards;
		}

		.isnow {
			animation: shangyi1 .5s forwards;
		}

		image {
			width: 80rpx;
			height: 56rpx;
			position: absolute;
			left: 0;
		}

		.dibuname {
			font-size: 22rpx;
			color: #333333;
			margin-top: 60rpx;
		}

		.ndibuname {
			font-size: 22rpx;
			color: rgba(141, 146, 153, 1);
			margin-top: 60rpx;
		}
	}

	.dibu {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		align-items: center;
		width: 750rpx;
		background: #fff;
		border: 1px solid #EEEEEE;
		height: 112rpx;
		z-index: 9999;
	}
</style>
